<template>
  <div @click.stop="stopPlay" style="width: 1520px;height: auto;">
    <Header></Header>
    <div class="teacherbox1">
      <img src="https://www.ketangpai.com/Public/Home/img/home-swiper/banner5.png">
    </div>
    <div class="teacherbox2">
      <div class="teacherbox2header">
        <span
          style="width: 200px;border-right: ghostwhite dashed 2px;font-weight: 800;font-size: 25px;float: left;cursor: pointer"
          id="sp1" @click="turnpage1">名<span id="s1" class="underblue">师培训</span>课</span>
        <span style="width: 200px;font-weight: 800;font-size: 25px;float: left;cursor: pointer" id="sp2"
              @click="turnpage2">名<span id="s2">师示范</span>课</span>
      </div>
      <div class="teacherbox2main" id="teacherbox2main1">
        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_493689_type_1_2020_02_27_14/02020-02-27-14-44-162020-02-27-16-08-01.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597545269&Signature=Xz%2BMIJfwi6v1Pwd5jAX4hGF8OTE%3D')"
            style="position: absolute;top: 20px;left: 110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/baikang.jpg">
          <h4>远程教学资源制作工具及方法</h4>
          <p>2月9日（周日）15:00-16:00</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">白康 华北电力大学</p>
        </div>
        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a6296d3a69/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1598066375&Signature=DcJ2Go5ifuy6J0QBjvEMCrJI%2BT8%3D')"
            style="position: absolute;top: 20px;left: 110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/liuheng.png">
          <h4>课件设计及制作的硬核知识</h4>
          <p>2月10日（周一）15:00-16:00</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">刘蘅 重庆工业职业技术学院</p>
        </div>
        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a6326a489c/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1598066375&Signature=R%2FVgQ5FSKkdg5DnwjUp7yM%2FYy%2Fc%3D')"
            style="position: absolute;top: 20px;left:110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/zhangyuewen.jpg">
          <h4>本科、研究生互动教学实践经验</h4>
          <p>2月15日（周六）15:00-16:00</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">张跃文 河南中医药大学</p>
        </div>
        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_upload/gaodengshuxue.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=F6zF%2BOEzW7C9FB2IjYQe4%2F9oQ6U%3D')"
            style="position: absolute;top: 20px;left: 110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/lihe.jpg">
          <h4>基于课堂派的高数混合式教学</h4>
          <p>2月18日（周二）15:00-16:00</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">李鹤 北京邮电大学</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-03-02/5e5cd154a2cbf/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1598066375&Signature=fFePtnonReRktd6rdzKBkF2dhAM%3D')"
            style="position: absolute;top: 20px;left:110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img height="111px" src="https://www.ketangpai.com/Public/Home/img/teacherPx/chenyuanming.jpg">
          <h4>基于课堂派混合式教学模式探讨</h4>
          <p>2月20日（周四）15:00-16:00</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">陈元明 桂林电子科技大学</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_493689_type_1_2020_02_21_14/02020-02-21-14-41-462020-02-21-15-46-37.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=%2Bs1yQTsisZ5%2FbfM9AX2nnXJ%2FB5Y%3D')"
            style="position: absolute;top: 20px;left:110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/zhangjingmiao.jpg">
          <h4>疫情下的线上和线下混合式教学</h4>
          <p>2月21日（周五）15:00-16:00</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">张妙静 广西师范大学</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_493689_type_1_2020_02_24_14/02020-02-24-14-52-022020-02-24-16-04-11.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=WCTGy8LyuOesa2jmxNp4jh66y%2FU%3D')"
            style="position: absolute;top: 20px;left:110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/wangyuanxiu.jpg">
          <h4>基于课堂派在线课程设计与教学</h4>
          <p>2月24日（周一）15:00-16:00</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">王元秀 济南大学</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_493689_type_1_2020_02_25_14/02020-02-25-14-49-292020-02-25-15-39-28.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=VixNzY2hNBlwBpf0Da4o0RY%2FPrc%3D')"
            style="position: absolute;top: 20px;left: 110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/xiaole.jpg">
          <h4>在线直播模式如何做好翻转课堂</h4>
          <p>2月25日（周二）15:00-16:00</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">肖乐 河南工业大学</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a62444ef7a/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1598066375&Signature=YD9dtjOk1DfAc%2BSmV8Ki%2FhxQ6bg%3D')"
            style="position: absolute;top: 20px;left:110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/jinguozheng.png">
          <h4>巧用课堂派，提升课堂教学效率</h4>
          <p>2月26日（周三）15:00-16:00</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">金国正 华东政法大学</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_493689_type_1_2020_02_27_14/02020-02-27-14-44-162020-02-27-16-08-01.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=Oeq8Sq32tlKGl2enw13%2FzNcuR3s%3D')"
            style="position: absolute;top: 20px;left: 110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/liuxueyan.png">
          <h4>远程教学小组功能教学经验分享</h4>
          <p>2月27日（周四）15:00-16:00</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">刘雪燕 嘉兴学院</p>
        </div>
      </div>


      <div class="teacherbox2mainhide" id="teacherbox2main2">
        <div
          @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_493689_2020_02_06_19/2020-02-06-19-43-28_2020-02-06-20-57-49.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=qWuMeTeRNmCuGSmB7TLutV%2F%2FBt0%3D')"
          class="teacherbox2maindiv">
          <img style="position: absolute;top: 20px;left: 110px;width: 48px;height: 48px;"
               data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
               src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/hantiantian.jpg">
          <h4>中国民族乐器造型与音色</h4>
          <p>2月6日（周四）</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">韩恬恬 南通大学</p>
        </div>
        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_493689_2020_02_08_16/2020-02-08-16-44-17_2020-02-08-16-58-29.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=ykBnxgzxPN1Ls%2FUFoigjttzMNr4%3D')"
            style="position: absolute;top: 20px;left: 110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img height="110px" src="https://www.ketangpai.com/Public/Home/img/teacherPx/zhangyuewen2.jpg">
          <h4>药物的发现--致科研人员</h4>
          <p>2月8日（周六）</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">张跃文 河南中医药大学</p>
        </div>
        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_550806_type_2_2020_02_21_13/02020-02-21-13-07-372020-02-21-13-41-48.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=EHKs5iWWdwCW%2BJAoNnGPFE61tsk%3D')"
            style="position: absolute;top: 20px;left:110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/shijie.jpg">
          <h4>计算机辅助设计课</h4>
          <p>2月21日（周五）</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">时洁 山东艺术设计学院</p>
        </div>
        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_531481_type_1_2020_02_21_13/02020-02-21-13-31-102020-02-21-14-13-39.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=rdVQf9Bo%2BFmGGgl4EeAg4WnbPSQ%3D')"
            style="position: absolute;top: 20px;left: 110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/guoyucui.jpg">
          <h4>工科数学通识教育</h4>
          <p>2月21日（周五）</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">郭玉翠 北京邮电大学</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_501516_type_1_2020_02_21_09/02020-02-21-09-53-172020-02-21-12-15-59.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=tCmMfaMPlowZbsU8mTs6pXIxhAs%3D')"
            style="position: absolute;top: 20px;left:110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img height="111px" src="https://www.ketangpai.com/Public/Home/img/teacherPx/xupei.jpg">
          <h4>统计学</h4>
          <p>2月21日（周五）</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">徐培 南京邮电大学</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_500792_type_1_2020_02_22_10/02020-02-22-10-06-552020-02-22-11-45-37.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=gFfOk0jh%2F5gMgOAvVkzogWZcgzA%3D')"
            style="position: absolute;top: 20px;left:110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/luoxiao2.jpg">
          <h4>心理学</h4>
          <p>2月22日（周六）</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">罗晓 集美大学</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_495504_type_1_2020_02_26_11/02020-02-26-11-47-442020-02-26-12-31-54.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=vhFCDm59Vr6rvIXa77khNTYuiqs%3D')"
            style="position: absolute;top: 20px;left:110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/yanglinlin.jpg">
          <h4>国际贸易实务</h4>
          <p>2月26日（周四）</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">杨琳琳 嘉兴学院南湖学院</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_493689_type_1_2020_02_27_14/02020-02-27-14-44-162020-02-27-16-08-01.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=Oeq8Sq32tlKGl2enw13%2FzNcuR3s%3D')"
            style="position: absolute;top: 20px;left: 110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/dengzhaohui.jpg">
          <h4>成本会计</h4>
          <p>2月27日（周四）</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">邓朝晖 嘉兴学院</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_493689_type_1_2020_02_27_14/02020-02-27-14-44-162020-02-27-16-08-01.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=Oeq8Sq32tlKGl2enw13%2FzNcuR3s%3D')"
            style="position: absolute;top: 20px;left:110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/jiangyujie2.jpg">
          <h4>资本定价与风险管理</h4>
          <p>2月27日（周四）</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">蒋玉洁 天津科技大学</p>
        </div>

        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://livestorage.ketangpai.com/record/classroom/course_540548_type_1_2020_02_26_12/02020-02-26-12-52-432020-02-26-13-46-19.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597547975&Signature=RBzMKeqBywo4u5VdXd%2B6ZIjyF9w%3D')"
            style="position: absolute;top: 20px;left: 110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/hanlaoshi.jpg">
          <h4>毛概</h4>
          <p>2月26日（周三）</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">韩老师 中华女子学院</p>
        </div>
        <div class="teacherbox2maindiv">
          <img
            @click.stop="videoPlay('https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-28/5e5894d36afd2/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1598066375&Signature=FFeoBjVOxYHhnfYzpiEUzs8G6TA%3Dsdfzx')"
            style="position: absolute;top: 20px;left: 110px;width: 48px;height: 48px;"
            data-url="https://attachments.ketangpai.com/ketangpai.aliapp.com/1/webroot/Uploads/Download/2020-02-29/5e5a5e9e07ade/640x480.mp4?OSSAccessKeyId=LTAItfPkNIKJFibY&Expires=1597389301&Signature=UZ%2F9oU6C5B7tSlLDo6c%2FcsB14B4%3D"
            src="https://www.ketangpai.com/Public/Home/img/player.png">
          <img src="https://www.ketangpai.com/Public/Home/img/teacherPx/yanyin.jpg">
          <h4>毛泽东思想与社会主义</h4>
          <p>2月26日（周三）</p>
          <p style="border-top: rgb(214, 211, 211) solid 1px;padding-bottom: 7px;">闫银 河北师范大学</p>
        </div>
      </div>
    </div>
    <div id="palyVideo"
         style="width: 1024px;height: 400px;background-color: #818181;position: fixed;top: 50px;left: 300px;display: none">
      <video style="z-index: 5" width="1024" :src="videoScr" controls autoplay>
      </video>
      <button class="close" @click="stopPlay">关闭</button>
    </div>
    <Footer1></Footer1>
  </div>
</template>

<script>
  import '../../assets/style.css'
  import Header from "../../components/Header";
  import Footer1 from "../../components/Footer1";

  export default {
    name: "TeacherTraining",
    data() {
      return {
        videoScr: '',
      }
    },
    components: {
      Header,
      Footer1,
    },
    methods: {
      videoPlay(value) {
        this.videoScr = value;
        console.log(this.videoScr);
        document.getElementById('palyVideo').setAttribute('class', 'play');
      },
      stopPlay() {
        document.getElementById('palyVideo').removeAttribute('class');
      },
      turnpage1() {
        document.getElementById('s1').setAttribute('class', 'underblue');
        document.getElementById('s2').removeAttribute('class');
        document.getElementById('teacherbox2main1').setAttribute('class', 'teacherbox2main');
        document.getElementById('teacherbox2main2').setAttribute('class', 'teacherbox2mainhide');
      },
      turnpage2() {
        document.getElementById('s2').setAttribute('class', 'underblue');
        document.getElementById('s1').removeAttribute('class');
        document.getElementById('teacherbox2main2').setAttribute('class', 'teacherbox2main');
        document.getElementById('teacherbox2main1').setAttribute('class', 'teacherbox2mainhide');
      },
    },
  }
</script>

<style scoped>
  .play {
    display: block !important;
  }

  .close {
    position: absolute;
    z-index: 22;
    right: 0;
    top: 0;
    color: #FFF;
    font-size: 14px;
    width: 55px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background: rgba(0, 0, 0, .5);
    border-radius: 3px;
    border: none;
  }

  .close:hover {
    background-color: rgba(0, 0, 0, .9);
  }
</style>
